
<div class="container-treetable">
    <p-treeTable #tt [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}" selectionMode="single" [filterMode]="filterMode" *ngIf="!isDynamic">
        <!-- ng-template para los títulos  -->
        <ng-template pTemplate="header">
            <tr>
                <th class="header-style" *ngFor="let label of labels">{{label}}</th>
            </tr>
            <tr>
                <th *ngFor="let label of labels">
                    <input 
                            class="input-filter"
                            *ngIf="label" 
                            type="text" 
                            pInputText
                            (input)="tt.filter($event.target.value, label, 'contains')"
                            [placeholder]="filterBy + ' ' +label" 
                            [ngStyle]="{width: labels.length >= 12 ? '100px' : 'auto'}"
                    />
                </th>
            </tr>
        </ng-template>
        <!-- ng-template para la data distribuida  -->
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
            <tr [ttRow]="rowNode">
                <td>
                    <!-- Primera columna  -->
                    <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                    {{ rowData[labels[0]] }}
                </td>
                <ng-container *ngFor="let label of labels; let i = index">
                    <!-- Condición para empezar desde la segunda iteración del ngFor -->
                    <td *ngIf="i > 0">{{ rowData[label] }}</td>
                </ng-container>
            </tr>
        </ng-template>
    </p-treeTable>

    <p-treeTable #ttt [value]="dynamicFiles" [columns]="dynamicCols" [scrollable]="true" [tableStyle]="{'min-width': '50rem'}" *ngIf="isDynamic">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th class="header-style" *ngFor="let col of columns">{{ col.header }}</th>
            </tr>
            <tr>
                <th *ngFor="let label of dynamicCols">
                    <input 
                            class="input-filter"
                            *ngIf="label.field" 
                            type="text" 
                            pInputText
                            (input)="ttt.filter($event.target.value, label.field, 'contains')"
                            [placeholder]="filterBy + ' ' +label.field" 
                            [ngStyle]="{width: dynamicCols.length >= 12 ? '80px' : 'auto'}"
                    />
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr [ttRow]="rowNode">
            <td *ngFor="let col of columns; let i = index">
                <p-treeTableToggler *ngIf="i === 0" [rowNode]="rowNode"></p-treeTableToggler>
                <span style="cursor:pointer" (click)="handleClick(lodash.get(rowData, col.field), col.field)" [innerHTML]="rowData[col.field]"></span>
            </td>
            </tr>
        </ng-template>
    </p-treeTable>
</div>

